import styles from "../styles.less";
import {Card, DatePicker, Row, Col} from "antd";
import {getTimeDistance} from "@/utils/utils";
import {connect} from 'umi';
import {useState} from "react";

const {RangePicker} = DatePicker;

const Statistics = () => {

  const [rangePickerValue, setRangePickerValue] = useState(getTimeDistance('year'));

  const handleRangePickerChange = (value) => {
    setRangePickerValue(value);
  };

  const selectDate = (type) => {
    setRangePickerValue(getTimeDistance(type));
  };

  const isActive = (type) => {
    if (!rangePickerValue) {
      return '';
    }

    const value = getTimeDistance(type);
    if (!value) {
      return '';
    }

    if (!rangePickerValue[0] || !rangePickerValue[1]) {
      return '';
    }

    if (
      rangePickerValue[0].isSame(value[0], 'day') &&
      rangePickerValue[1].isSame(value[1], 'day')
    ) {
      return styles.currentDate;
    }
    return '';
  };

  return (
    <Card
      className={styles.myCard2739482}
      title={"数据统计"} bordered={false} style={{marginBottom: 5}}
      size={"small"}
      extra={<div className={styles.cardExtraWrap}>
        <div className={styles.cardExtra}>
          <a className={isActive('today')} onClick={() => selectDate('today')}>今日</a>
          <a className={isActive('week')} onClick={() => selectDate('week')}>本周</a>
          <a className={isActive('month')} onClick={() => selectDate('month')}>本月</a>
          <a className={isActive('year')} onClick={() => selectDate('year')}>本年</a>
        </div>
        <RangePicker value={rangePickerValue} onChange={handleRangePickerChange} style={{width: 256}}/>
      </div>}>
      <Row gutter={16}>
        <Col span={4}>
          <Card
            title="统计数量" bordered={false} size={'small'} className={styles.myCardBox27384}>0</Card>
        </Col>
        <Col span={4}>
          <Card
            title="统计数量" bordered={false} size={'small'} className={styles.myCardBox27384}>0</Card>
        </Col>
        <Col span={4}>
          <Card
            title="统计数量" bordered={false} size={'small'} className={styles.myCardBox27384}>0</Card>
        </Col>
        <Col span={4}>
          <Card
            title="统计数量" bordered={false} size={'small'} className={styles.myCardBox27384}>0</Card>
        </Col>
        <Col span={4}>
          <Card
            title="统计数量" bordered={false} size={'small'} className={styles.myCardBox27384}>0</Card>
        </Col>
        <Col span={4}>
          <Card
            title="统计数量" bordered={false} size={'small'} className={styles.myCardBox27384}>0</Card>
        </Col>
      </Row>
    </Card>
  );
};

export default connect(({}) => {
  return {};
})(Statistics);
